<template>
  <div class="goods">
    <div class="nav">
      <div class="top">
        <a
          href="javascript:;"
          class="sort-a"
          @click="startSort"
          :class="{ active: sortType === 1 }"
          >综合排序</a
        >
        <a
          href="javascript:;"
          @click="sortPrice(1)"
          :class="{ active: sortType === 2 }"
          >价格从低到高</a
        >
        <a
          href="javascript:;"
          @click="sortPrice(-1)"
          :class="{ active: sortType === 3 }"
          >价格从高到低</a
        >
        <div class="price-input">
          <input type="number" placeholder="价格" v-model="priceGt" />
          <span style="margin: 0 5px"> - </span>
          <input type="number" placeholder="价格" v-model="priceLte" />
          <button class="btn" @click="getGoodsList()">确定</button>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="goodsList">
        <div
          class="goods-box"
          v-for="goods in goodsList.data"
          :key="goods.productId"
          @mouseenter="checkId = goods.productId"
          @mouseleave="checkId = 0"
        >
          <router-link to="/detail">
            <img :src="goods.productImageBig" alt="" />
          </router-link>
          <h3 class="h3-title">{{ goods.productName }}</h3>
          <h6 class="h6-detail">{{ goods.subTitle }}</h6>
          <div class="price-box">
            <div class="input-detail" v-if="goods.productId === checkId">
              <input
                type="button"
                readonly="readonly"
                value="查看详情"
                class="default-btn"
                style="margin: 0px 5px"
              />
              <input
                type="button"
                readonly="readonly"
                value="加入购物车"
                class="main-btn"
                style="margin: 0px 5px"
              />
            </div>
            <p v-else>￥{{ goods.salePrice }}</p>
          </div>
        </div>
      </div>
      <template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 40, 60, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="goodsList.total"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
// import { getAllGoods } from '@/api/index'

export default {
  name: 'Goods',
  data() {
    return {
      // pageNo: 1, // 页码
      pageSize: 20, // 每页显示的数量
      sort: '',
      priceGt: '',
      priceLte: '',
      currentPage: 1,
      total: 0,
      sortType: 1,

      checkId: 0,
    }
  },
  computed: {
    ...mapState('goods', ['goodsList']),
  },
  methods: {
    getGoodsList() {
      this.$store.dispatch('goods/getGoodsList', {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        sort: this.sort,
        priceGt: this.priceGt,
        priceLte: this.priceLte,
      })
    },
    mouse_enter(id) {
      this.checkId = id
    },
    mouse_leave(id) {
      this.checkId = 0
    },
    //价格排序
    sortPrice(v) {
      v === 1 ? (this.sortType = 2) : (this.sortType = 3)
      this.sort = v
      this.currentPage = 1
      this.getGoodsList()
    },
    //默认排序
    startSort() {
      this.sortType = 1
      this.sort = ''
      this.getGoodsList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getGoodsList()
    },
  },
  mounted() {
    this.getGoodsList()
  },
}
</script>
<style lang="less">
body {
  background-color: #ededed;
}
</style>
<style lang="less" scoped>
// 清除默认样式
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

// 通栏样式
.goods {
  padding: 0 auto;
}

.nav {
  height: 60px;
  line-height: 60px;

  .top {
    width: 1220px;
    margin: 0 auto;
  }

  > div {
    display: flex;
    align-items: center;

    a {
      padding: 0 15px;
      height: 100%;
      font-size: 12px;
      color: #999;
      font-style: normal;
      text-decoration: none;

      &.active {
        color: #5683ea;
      }

      &:hover {
        color: #5683ea;
      }
    }
  }

  .price-input {
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;

    input {
      box-sizing: border-box;
      width: 80px;
      height: 30px;
      border: 1px solid #ccc;
      text-align: center;
      background: none;
      border-radius: 5px;
    }

    .btn {
      border: 1px solid #5c81e3;
      border-radius: 4px;
      margin-left: 10px;
      width: 80px;
      height: 30px;
      font-size: 12px;
      color: #fff;
      background-color: #678ee7;
      background-image: linear-gradient(180deg, #678ee7, #5078df);
    }
  }
}

.item {
  // width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// 设置商品摆放列表的样式
.goodsList {
  width: 1220px;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;

  // 设置单商品的样式
  .goods-box {
    float: left;
    width: 305px;
    height: 430px;
    transform: translateY(-3px);
    border: 1px solid #efefef;
    transition: all 0.5s;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;

    &:hover {
      box-shadow: 1px 1px 20px #999;
      transform: translateY(-1px);
    }

    img {
      margin: 50px auto 10px;
      width: 206px;
      height: 206px;
      display: block;
    }

    .h3-title {
      line-height: 1.2;
      font-size: 16px;
      color: #424242;
      margin: 0 auto;
      padding: 0 14px;
      text-align: center;
      overflow: hidden;
    }

    .h6-detail {
      text-align: center;
      line-height: 1.2;
      font-size: 12px;
      color: #d0d0d0;
      padding: 10px;
    }

    // 价格栏的相关样式
    .price-box {
      margin: 15px 0px;
      width: 100%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #d44d44;
      font-family: Arial;
      font-size: 18px;
      font-weight: 700;
      float: left;

      // 查看详情按钮相关样式
      .default-btn {
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        font-size: 12px;
        color: #646464;
        background-color: #f9f9f9;
        background-image: linear-gradient(180deg, #fff, #f9f9f9);
        width: 100px;
        height: 30px;
        line-height: 28px;
        vertical-align: middle;
        display: inline-block;
        cursor: pointer;
        text-align: center;
      }

      // 加入购物车按钮相关样式
      .main-btn {
        border: 1px solid #5c81e3;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        background-color: #678ee7;
        background-image: linear-gradient(180deg, #678ee7, #5078df);
        width: 100px;
        height: 30px;
        line-height: 28px;
        vertical-align: middle;
        display: inline-block;
        cursor: pointer;
        text-align: center;
      }

      // 价格相关样式
      p {
        margin: 15px 0;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #d44d44;
        font-family: Arial;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}

.block {
  margin: 10px auto;
  width: 1220px;

  /deep/.el-pagination {
    float: right;
  }
}
</style>
